<template>
	<view class="container">
		<!-- 导航栏 -->
		<view class="navbar">
			<view class="back-icon" @click="goBack">
				<text class="icon-back">‹</text>
			</view>
			<text class="navbar-title">提交订单</text>
		</view>

		<!-- 票务信息 -->
		<view class="ticket-info">
			<text class="ticket-name">故宫博物馆学生票</text>
			<view class="ticket-date-quantity">
				<view class="date-quantity-title">选择日期/数量</view>
				<view class="quantity-control">
					<button class="quantity-btn" @click="decreaseQuantity">-</button>
					<text class="quantity">{{ quantity }}</text>
					<button class="quantity-btn" @click="increaseQuantity">+</button>
				</view>
			</view>

			<!-- 日期选择 -->
			<view class="date-selection">
				<view class="date-item" v-for="(date, index) in dates" :key="index">
					<view class="date-weekday">{{ date.weekday }}</view>
					<view class="date-day" :class="{ 'date-active': date.active }">
						{{ date.day }}
						<view v-if="date.active" class="date-checkmark">✓</view>
					</view>
					<view class="date-price">¥{{ date.price }}</view>
				</view>
				<view class="more-dates">
					<text>更多日期 ></text>
				</view>
			</view>

			<!-- 票务说明 -->
			<view class="ticket-description">
				<view class="description-item">
					<text class="description-title">适用人群：</text>
					<text class="description-content">大学生（含港、澳、台学生；不含成人教育、研究生）</text>
				</view>
				<view class="description-item">
					<text class="description-title">有条件退</text>
					<text class="description-title">无需取票</text>
					<text class="description-content">| 购买须知 ></text>
				</view>
				<view class="description-item">
					<text class="description-content">同一有效证件同一使用日期限购1份</text>
				</view>
			</view>
		</view>

		<!-- 出行信息 -->
		<view class="travel-info">
			<view class="section-header">
				<text class="section-title">出行信息</text>
			</view>

			<view class="traveler-list">
				<view class="traveler-item" v-for="(traveler, index) in travelers" :key="index">
					<view class="traveler-name">
						<button>{{ traveler.name }}</button>
						<!-- <view v-if="traveler.isDefault" class="default-tag">✓</view> -->
					</view>
					<view class="traveler-checkbox">
						<checkbox :checked="traveler.selected" @click="toggleTraveler(index)"></checkbox>
					</view>
				</view>

				<view class="add-traveler">
					<button @click="addTraveler">
						<text class="icon-add">+</text> 新增游客
					</button>
				</view>
			</view>

			<view class="traveler-details">
				<view class="traveler-detail-item">
					<view class="delete-traveler">
						<text class="icon-delete">×</text>
					</view>
					<view class="traveler-info">
						<text class="detail-name">游客</text>
						<view class="detail-content">
							<text>身份证：{{ currentTraveler.id }}</text>
							<text>手机号：{{ currentTraveler.phone }}</text>
						</view>
					</view>
					<view class="edit-traveler">
						<text class="icon-edit">✏</text>
					</view>
				</view>
			</view>

			<view class="contact-info">
				<view class="contact-item">
					<text class="contact-label">订单联系手机</text>
					<text class="contact-value">{{ contactPhone }}</text>
					<view class="contact-edit">
						<text class="icon-edit">✏</text>
					</view>
				</view>
			</view>

			<view class="travel-tip">
				<text>有此限制时，游客数量必须与订票数量一致；无此限制时，只需填写1名游客即可；游客未填够时出行信息标红。</text>
			</view>
		</view>

		<!-- 保险信息 -->
		<view class="insurance-info">
			<view class="insurance-header">
				<image src="/static/icons/check.png" class="insurance-icon"></image>
				<text class="insurance-title">疫情有保障 家人更放心</text>
			</view>

			<view class="insurance-content">
				<view class="insurance-item">
					<text class="insurance-name">博物馆意外保险(含新冠保障) ></text>
					<view class="insurance-price">
						<text>¥10</text>
						<text>/人×1份</text>
						<image src="/static/icons/check-blue.png" class="insurance-checked"></image>
					</view>
				</view>

				<view class="insurance-details">
					<text>隔离津贴 ¥150/天 | 新冠确诊 ¥8,000 | 意外保额 ¥20万</text>
					<text>出行日期当天00:00（当地时间）前可无损取消</text>
				</view>
			</view>

			<view class="insured-info">
				<view class="insured-item">
					<text class="insured-label">被保人</text>
					<text class="insured-value">{{ currentTraveler.name }}（被保人必须与出行人一致）</text>
				</view>
				<view class="insured-item">
					<text class="insured-label">身份证号</text>
					<text class="insured-value">{{ currentTraveler.id }}</text>
				</view>
			</view>
		</view>

		<!-- 优惠信息 -->
		<view class="discount-info">
			<view class="discount-header">
				<text class="discount-title">优惠</text>
			</view>

			<view class="discount-content">
				<view class="discount-item">
					<text class="discount-label">优惠券</text>
					<text class="discount-value">暂无可用优惠券 ></text>
				</view>
			</view>
		</view>

		<!-- 订单条款 -->
		<view class="order-terms">
			<text class="terms-text">请您在提交订单前仔细阅读《预订条款》</text>
		</view>

		<!-- 交易说明 -->
		<view class="transaction-info">
			<view class="transaction-item">
				<text>为支付绿色环保，需理解并同意电子合同的有效性。如需要签署纸质合同，请联系客服</text>
			</view>
			<view class="transaction-item">
				<text>交易款项由小默旅行科技公司统一收取</text>
			</view>
		</view>

		<!-- 底部合计与提交按钮 -->
		<view class="bottom-bar">
			<view class="total-price">
				<text>合计: ¥{{ totalPrice }}</text>
			</view>
			<view class="submit-button">
				<button @click="submitOrder">提交订单</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				quantity: 2,
				dates: [{
						weekday: '周四',
						day: '11-25',
						price: 20,
						active: false
					},
					{
						weekday: '周五',
						day: '11-26',
						price: 20,
						active: true
					},
					{
						weekday: '周六',
						day: '11-27',
						price: 20,
						active: false
					}
				],
				travelers: [{
					name: '张三哥',
					id: '912345678901234567',
					phone: '13612345678',
					selected: true,
					isDefault: true
				}],
				contactPhone: '13612345678',
				insuranceChecked: true,
				ticketPrice: 20,
				insurancePrice: 20
			};
		},
		computed: {
			currentTraveler() {
				return this.travelers.find(traveler => traveler.selected) || {};
			},
			totalPrice() {
				return this.quantity * this.ticketPrice + (this.insuranceChecked ? this.insurancePrice : 0);
			}
		},
		methods: {
			goBack() {
				uni.navigateBack();
			},
			decreaseQuantity() {
				if (this.quantity > 1) {
					this.quantity--;
				}
			},
			increaseQuantity() {
				this.quantity++;
			},
			toggleTraveler(index) {
				this.travelers[index].selected = !this.travelers[index].selected;
			},
			addTraveler() {
				// 这里可以添加新增游客的逻辑
				uni.showToast({
					title: '新增游客',
					icon: 'none'
				});
			},
			submitOrder() {
				// 提交订单的逻辑
				uni.showToast({
					title: '订单提交成功',
					icon: 'success'
				});
			}
		}
	};
</script>

<style scoped>
	.container {
		width: 100%;
		height: 100vh;
		background-color: #f5f5f5;
	}

	/* 导航栏样式 */
	.navbar {
		height: 60px;
		background: linear-gradient(to right, #4e95ff, #66a3ff);
		display: flex;
		align-items: center;
		padding: 0 15px;
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.back-icon {
		color: white;
		font-size: 24px;
		margin-right: auto;
	}

	.navbar-title {
		color: white;
		font-size: 18px;
		font-weight: bold;
	}

	/* 票务信息样式 */
	.ticket-info {
		background-color: white;
		margin: 10px;
		border-radius: 10px;
		padding: 15px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

	}

	.ticket-name {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 15px;
		color: #333;
		border-bottom: 1px dashed #ccc;
		padding-bottom: 10px;
	}

	.ticket-date-quantity {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
	}

	.date-quantity-title {
		font-size: 16px;
		color: #333;
	}

	.quantity-control {
		display: flex;
		align-items: center;
	}

	.quantity-btn {
		width: 25px;
		height: 25px;
		border: 1px solid #ccc;
		border-radius: 50%;
		background-color: white;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 16px;
	}

	.quantity {
		margin: 0 10px;
		font-size: 16px;
		min-width: 20px;
		text-align: center;
	}

	.date-selection {
		display: flex;
		overflow-x: auto;
		margin-bottom: 15px;
		padding-bottom: 10px;
	}

	.date-item {
		min-width: 80px;
		text-align: center;
		margin-right: 10px;
	}

	.date-weekday {
		font-size: 14px;
		color: #666;
	}

	.date-day {
		font-size: 18px;
		font-weight: bold;
		color: #333;
		position: relative;
		padding: 5px;
		border-radius: 5px;
	}

	.date-active {
		background-color: #4e95ff;
		color: white;
	}

	.date-checkmark {
		position: absolute;
		bottom: 0;
		right: 0;
		background-color: white;
		color: #4e95ff;
		border-radius: 10px;
		padding: 2px 5px;
		font-size: 12px;

	}

	.date-price {
		font-size: 14px;
		color: #ff6b6b;
		margin-top: 5px;
	}

	.more-dates {
		margin-left: auto;
		font-size: 14px;
		color: #666;
	}

	.ticket-description {
		margin-top: 15px;
	}

	.description-item {
		margin-bottom: 8px;
		font-size: 14px;
	}

	.description-title {
		color: #4e95ff;
		margin-right: 5px;
	}

	.description-content {
		color: #666;
	}

	/* 出行信息样式 */
	.travel-info {
		background-color: pink;
		margin: 10px;
		border-radius: 10px;
		padding: 15px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.section-header {
		margin-bottom: 15px;
	}

	.section-title {
		font-size: 16px;
		color: #333;
		font-weight: bold;
	}

	.traveler-list {
		margin-bottom: 15px;
		display: flex;
	}

	.traveler-item {
		display: flex;
		align-items: center;
		margin-bottom: 4px;
	}

	.traveler-name {
		flex: 1;
		font-size: 16px;
		color: #333;
		position: relative;
	}

	.default-tag {
		position: absolute;
		top: -5px;
		right: -5px;
		background-color: #4e95ff;
		color: white;
		border-radius: 10px;
		padding: 2px 5px;
		font-size: 12px;
	}

	.traveler-checkbox {
		width: 20px;
		height: 20px;
		margin-left: -18px;
		margin-top: 10px;
	}

	.add-traveler {
		margin: 10px 0;
	}

	.add-traveler button {
		background-color: #4e95ff;
		color: white;
		border: none;
		border-radius: 5px;
		padding: 5px 10px;
		font-size: 14px;
	}

	.icon-add {
		margin-right: 5px;
	}

	.traveler-details {
		background-color: #fff8e1;
		padding: 10px;
		border-radius: 5px;
		margin-bottom: 15px;
	}

	.traveler-detail-item {
		display: flex;
		align-items: center;
	}

	.delete-traveler {
		margin-right: 10px;
		font-size: 18px;
		color: #ff6b6b;
	}

	.traveler-info {
		flex: 1;
	}

	.detail-name {
		font-size: 14px;
		color: #666;
		margin-bottom: 5px;
	}

	.detail-content {
		font-size: 14px;
		color: #333;
	}

	.detail-content text {
		display: block;
		margin-bottom: 3px;
	}

	.edit-traveler {
		font-size: 18px;
		color: #4e95ff;
	}

	.contact-info {
		margin-top: 15px;
	}

	.contact-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.contact-label {
		font-size: 14px;
		color: #666;
	}

	.contact-value {
		font-size: 14px;
		color: #333;
	}

	.contact-edit {
		font-size: 18px;
		color: #4e95ff;
	}

	.travel-tip {
		background-color: #fff8e1;
		padding: 10px;
		border-radius: 5px;
		margin-top: 15px;
		font-size: 12px;
		color: #666;
	}

	/* 保险信息样式 */
	.insurance-info {
		background-color: white;
		margin: 10px;
		border-radius: 10px;
		padding: 15px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.insurance-header {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
		background-color: limegreen;
	}

	.insurance-icon {
		width: 20px;
		height: 20px;
		margin-right: 5px;
	}

	.insurance-title {
		font-size: 16px;
		color: seagreen;
		font-weight: bold;
	}

	.insurance-content {
		margin-bottom: 15px;
	}

	.insurance-item {
		display: flex;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.insurance-name {
		font-size: 14px;
		color: #333;
	}

	.insurance-price {
		display: flex;
		align-items: center;
	}

	.insurance-price text {
		font-size: 14px;
		color: #ff6b6b;
	}

	.insurance-checked {
		width: 20px;
		height: 20px;
		margin-left: 5px;
	}

	.insurance-details {
		font-size: 12px;
		color: #666;
		line-height: 1.6;
	}

	.insured-info {
		margin-top: 15px;
	}

	.insured-item {
		display: flex;
		margin-bottom: 8px;
	}

	.insured-label {
		width: 70px;
		font-size: 14px;
		color: #666;
	}

	.insured-value {
		flex: 1;
		font-size: 14px;
		color: #333;
	}

	/* 优惠信息样式 */
	.discount-info {
		background-color: white;
		margin: 10px;
		border-radius: 10px;
		padding: 15px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.discount-header {
		margin-bottom: 15px;
	}

	.discount-title {
		font-size: 16px;
		color: #333;
		font-weight: bold;
	}

	.discount-content {
		margin-bottom: 15px;
	}

	.discount-item {
		display: flex;
		justify-content: space-between;
	}

	.discount-label {
		font-size: 14px;
		color: #333;
	}

	.discount-value {
		font-size: 14px;
		color: #666;
	}

	/* 订单条款样式 */
	.order-terms {
		margin: 10px;
	}

	.terms-text {
		font-size: 14px;
		color: #666;
	}

	/* 交易说明样式 */
	.transaction-info {
		margin: 10px;
		padding: 10px;
		background-color: #f9f9f9;
		border-radius: 5px;
	}

	.transaction-item {
		font-size: 12px;
		color: #666;
		margin-bottom: 8px;
	}

	/* 底部合计与提交按钮 */
	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: white;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15px;
		border-top: 1px solid #eee;
	}

	.total-price {
		font-size: 18px;
		font-weight: bold;
		color: #333;
	}

	.total-price text {
		color: #ff6b6b;
	}

	.submit-button button {
		background-color: #4e95ff;
		color: white;
		border: none;
		border-radius: 5px;
		padding: 10px 20px;
		font-size: 16px;
	}
</style>